<template>
	<div class="index">
		<div class="centent" ref="wrapper">
			<transition :name="transitionName">
				<keep-alive :include="catchPages">
					<router-view v-if="$route.meta.keepAlive" class="keppAlive"></router-view>
				</keep-alive>
			</transition>
			<transition :name="transitionName">
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</transition>
		</div>
		<footer>
			<a href="javascript:;" class="fotBar" v-for="(item,index) in footerBar" @click="location(item.router)">
				<img :src="item.state?item.activeIcon:item.navIcon" />
				<span>{{item.text}}</span>
			</a>
		</footer>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	export default {
		name: "index",
		data() {
			return {
				transitionName: "",
				//transitionName换场动画、footerBar底部路由配置
				footerBar: [{
						"router": "/index/home",
						"state": true,
						"text": "首页",
						"navIcon": require("../assets/img/ic_home_normal.png"),
						"activeIcon": require("../assets/img/ic_home_selected.png")
					},
					{
						"router": "/index/find",
						"state": false,
						"text": "发现",
						"navIcon": require("../assets/img/ic_find_normal.png"),
						"activeIcon": require("../assets/img/ic_find_selected.png")
					},
					{
						"router": "/index/about",
						"state": false,
						"text": "我的",
						"navIcon": require("../assets/img/ic_personal_normal.png"),
						"activeIcon": require("../assets/img/ic_personal_selected.png")
					}
				]
			}
		},
		activated() {
			this.routeActive();
		},
		computed: {
			...mapState(["catchPages"])
		},
		methods: {
			...mapMutations(['backLeft']),
			routeActive() {
				//监听路由变换切换图片
				for(var i = 0; i < this.footerBar.length; i++) {
					this.footerBar[i].state = false;
					if(this.$route.fullPath == this.footerBar[i].router) {
						this.footerBar[i].state = true;
						$(".fotBar").eq(i).addClass("active").siblings().removeClass("active");
					}
				};
			},
			location(route) {
				this.$router.replace({
					path: route
				});
			}
		},
		watch: { //使用watch 监听$router的变化
			$route(to, from) {
				this.routeActive();
				//如果to索引大于from索引,判断为前进状态,反之则为后退状态
				if(to.meta.index > from.meta.index) {
					//设置动画名称
					this.transitionName = 'slide-left';
				} else {
					this.transitionName = 'slide-right';
				};
			}
		}
	};
</script>
<style scoped lang="scss">
	.index {
		width: 100%;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		position: relative;
		.centent {
			width: 100%;
			height: 100%;
			overflow: auto;
			padding-bottom: 49px;
			box-sizing: border-box;
		}
		footer {
			width: 100%;
			height: 49px;
			background: black;
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			a {
				width: 50%;
				height: 100%;
				display: block;
				font-size: 11px;
				color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				img {
					width: 25px;
				}
			}
			.active {
				color: gold;
			}
		}
		.slide-right-enter-active,
		.slide-right-leave-active,
		.slide-left-enter-active,
		.slide-left-leave-active {
			will-change: transform;
			transition: all 500ms;
			position: absolute;
		}
		.slide-right-enter {
			opacity: 0;
			transform: translate3d(-100%, 0, 0);
		}
		.slide-right-leave-active {
			opacity: 0;
			transform: translate3d(100%, 0, 0);
		}
		.slide-left-enter {
			opacity: 0;
			transform: translate3d(100%, 0, 0);
		}
		.slide-left-leave-active {
			opacity: 0;
			transform: translate3d(-100%, 0, 0);
		}
	}
</style>